define(["jquery"],function($){
	function LoginModal(){
		this.createDom();
		this.addListener();
		this.genCode();
	}
	LoginModal.Html=`<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myLoginModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myLoginModalLabel">登录</h4>
	      </div>
	      <div class="modal-body">
	      	<div class="alert alert-danger hidden login-err">账号或密码错误！</div>
	      	<div class="alert alert-danger hidden code-error">验证码输入错误</div>
	        <form class="form-login">
	          <div class="form-group">
	            <label for="username">用户名</label>
	            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
	          </div>
	          <div class="form-group">
	            <label for="password">密码</label>
	            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
	          </div>
	          <div class="form-group">
	            <label for="loginValidateCode">验证码</label>
	            <input type="text" class="form-control" name="code" id="loginValidateCode" placeholder="请输入验证码">
	          	<div class="gen-code"></div>
	          </div>
	        </form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary" id="btn-login">登录</button>
	      </div>
	    </div>
	  </div>
	</div>`;
	$.extend(LoginModal.prototype,{
		createDom(){
			$(LoginModal.Html).appendTo("body");
		},
		addListener(){
			$("#btn-login").on("click",this.loginHandel);
			$(".gen-code").on("click",this.genCode);
			$("#loginValidateCode").on("blur",this.codeHandel);
		},
		loginHandel(){
			const
				// url="http://rap2api.taobao.org/app/mock/119523/api/users/login",
				url = "/api/users/login",
				data = $(".form-login").serialize();
				console.log(data);
			$.post(url,data,(data)=>{
				console.log(data);
				if(data.res_body.status===1){
					const username = data.res_body.data.username;
					sessionStorage.loginUser = username;
					$("#loginModal").modal("hide");
					$(".already-login").removeClass("hidden")
						.find(".link-user").text(username).end()
						.siblings(".not-login").remove();
				}else{
					$(".login-err").removeClass("hidden");
				}
			});
		},
		genCode(){
			$.getJSON("/gen_code",(resData)=>{
				$(".gen-code").html(resData.res_body.data);
			});
		},
		codeHandel(event){
			const code = $("#loginValidateCode").val();
			$.getJSON("/verify",{code},(data)=>{
				if(data.res_body.valid !== true){
					$(".code-error").removeClass("hidden");
				}else{
					$(".code-error").addClass("hidden");
				}
			});
		}
	});
	return new LoginModal();
});